<template>
  <div class="main">
    <!-- 个人申请 -->
    <van-nav-bar
      title="请假"
      right-text="休假记录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-cell  is-link size="large" label="请选择" @click="show = true">
      <template #title>
        <div class="cusrom_title">
          <span class="custom-title">休假项目</span>
          <i class="iconfont icon-xinghao-copy-copy-copy-copy custom_icon copy"></i>
        </div>
      </template> 
    </van-cell>
    <van-cell  is-link size="large" label="请选择" @click="show = true">
      <template #title>
        <div class="cusrom_title">
          <span class="custom-title">事由</span>
          <i class="iconfont icon-xinghao-copy-copy-copy-copy custom_icon copy"></i>
        </div>
      </template> 
    </van-cell>
    <div class="attachment">
     <div class="title">附件</div>

     <van-uploader 
     :after-read="afterRead" 
     :max-size="5000 * 1024" 
     v-model="fileList"
     multiple  
     :max-count="9"
     upload-icon="plus"
     @oversize="onOversize">
     <template #preview-delete>  
      <i class="iconfont icon-shanchu custom_icon"></i>
    </template>  
  </van-uploader>
     <!-- .van-uploader__upload-icon -->
    </div>
    <van-button type="primary">提交</van-button>
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
    />
  </div>
</template>

<script setup>
import {  ref } from 'vue'
import { useRouter } from "vue-router"
const router = useRouter()

const onClickLeft = () => history.back();
const onClickRight = () => {
  router.push('/management')
};

const show = ref(false);
    const actions = [
      { name: '选项一' },
      { name: '选项二' },
      { name: '选项三' },
    ];
const onCancel = () => showToast('取消');

const fileList = ref([]);
const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    };
const onOversize = (file) => {
  console.log(file);
  showToast('文件大小不能超过 5M');
};


</script>

<style lang="scss" scoped>
.main{
  padding-bottom: 80px;
  .custom_icon{
    font-size: 20px;
    color: red;
    &.copy{
      font-size: 35px;
    }
  }
  .cusrom_title{
    display: flex;
  }
  .attachment{
    margin: 20px;
    padding-bottom: 20px;
    .title{
      color: #747474;
      margin-bottom: 8px;
    }
    border-bottom:1px solid #ccc
  }
}
:deep(.van-hairline--bottom:after){
  border: 0;
}
:deep(.van-cell){
  padding: 20px;
}
:deep(.van-cell:after){
  border-bottom:1px solid #ccc
}
:deep(.van-cell__title){
  color: #747474;
}
:deep(.van-button){
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 80px);
}

</style>